import {
    GithubFilled,
    InfoCircleFilled,
    PlusCircleFilled,
    QuestionCircleFilled,
    SearchOutlined,
} from '@ant-design/icons';
import type {
    MenuDataItem,
    BasicLayoutProps as ProLayoutProps,
    Settings,
} from '@ant-design/pro-layout';
import type { ProSettings } from '@ant-design/pro-components';
import { PageContainer, ProLayout, ProCard } from '@ant-design/pro-components';
import { Button, Avatar, Image } from 'antd';
import { useState, useEffect } from 'react';
import './index.scss'
import LeftInfoStyle from './leftMenuinfo.less'
import { useHistory, useLocation, Link } from 'umi';
import '@/static/icon/iconfont.css'


export default (props: any) => {
    const history = useHistory();
    console.log(`123`, props);
    const [tabList, setTabList] = useState([
        {
            tab: '销售门户',
            key: '/portal/sub-page/sub-sub-page1',
            closable: false,
        },
    ])
    useEffect(() => {
        let list1: never[] = []
        tabList.forEach(element => {
            console.log(12333);
            list1.push(element.tab)
        })
        // setActiveKey1(item.path)
        // if (list1.indexOf(item.name) == -1) {
        //     console.log(`name`, item.name);
        //     tabList.push({
        //         tab: item.name,
        //         key: item.key,
        //         closable: true,
        //     },)
        // }
    }, [props])

    const [activeKey, setActiveKey] = useState(tabList[0].key);
    const [activeKey1, setActiveKey1] = useState('/portal');
    const tabListadd = (item) => {
        let list1: never[] = []
        tabList.forEach(element => {
            console.log(12333);
            list1.push(element.tab)
        })
        setActiveKey1(item.path)
        if (list1.indexOf(item.name) == -1) {
            console.log(`name`, item.name);
            tabList.push({
                tab: item.name,
                key: item.key,
                closable: true,
            },)
        }
    }
    const remove = (targetKey) => {
        let newActiveKey = activeKey;
        let lastIndex = -1;
        tabList.forEach((item, i) => {
            if (item.key === targetKey) {
                lastIndex = i - 1;
            }
        });
        const newPanes = tabList.filter((item) => item.key !== targetKey);
        if (newPanes.length && newActiveKey === targetKey) {
            if (lastIndex >= 0) {
                newActiveKey = newPanes[lastIndex].key;
            } else {
                newActiveKey = newPanes[0].key;
            }
        }
        setTabList(newPanes)
        setActiveKey(newActiveKey);
    };
    const settings: ProSettings | undefined = {
        fixSiderbar: true,
        layout: 'mix',
        splitMenus: true,
    };
    const {
        children,
        location = {
            pathname: '/portal',
        },
    } = props;

    const menuDataRender = (menuList: MenuDataItem[]): MenuDataItem[] =>
        menuList.map((item) => {
            return {
                ...item,
                children: item.children ? menuDataRender(item.children) : undefined,
            };
        });
    const backlogin = () => {
        alert('退出登录成功');
        localStorage.clear();
        history.push('/')
    }

    const userinfo = () => {
        
    }


    return (
        <div
            id="test-pro-layout"
            style={{
                height: '100vh',
            }}
        >
            <ProLayout
                siderWidth={256}
                title={false}
                onMenuHeaderClick={() => history.push('/')}
                logo={'https://erpdemo.fanpusoft.com/Images/Logo/637520963340736067_637518569831196922_logo.png'}
                token={{
                    header: {
                        colorBgHeader: '#5377B6',
                        colorHeaderTitle: '#fff',
                        colorTextMenu: '#dfdfdf',
                        colorTextMenuSecondary: '#dfdfdf',
                        colorTextMenuSelected: '#fff',
                        colorBgMenuItemSelected: '#839ecc',
                        colorTextRightActionsItem: '#dfdfdf',
                    },
                    sider: {
                        colorMenuBackground: '#fff',
                        colorMenuItemDivider: '#dfdfdf',
                        colorTextMenu: '#595959',
                        colorTextMenuSelected: 'rgba(42,122,251,1)',
                        colorBgMenuItemSelected: 'rgba(230,243,254,1)',
                    },
                }}
                menuExtraRender={(props) => {
                    if (props?.collapsed) return undefined;
                    return (
                        <div className={LeftInfoStyle.info_container}>
                            <img src="http://erpdemo.fanpusoft.com/UpLoader/Image/202103/637518604254601287_11.jpg" alt="未响应" />
                            <div>
                                <span>姓名：张妍</span>
                                <span>部门：总经办</span>
                                <span>职位：总经理</span>
                            </div>
                        </div>
                    )
                }}
                {...props}
                menu={{
                    type: 'group',
                }}
                itemRender={(route, params, routes, paths) => {
                    const first = routes.indexOf(route) === 0;
                    return first ? (
                        <Link to={paths.join('/')}>{route.breadcrumbName}</Link>
                    ) : (
                        <span>{route.breadcrumbName}</span>
                    );
                }}
                menuDataRender={menuDataRender}
                menuItemRender={(item, dom) => (
                    <div
                        onClick={() => {
                            console.log(`item`, item);
                            history.push(item.path);
                            tabListadd(item)
                        }}
                    >
                        {dom}
                    </div>
                )}
                {...settings}
            >
                <PageContainer
                    breadcrumb={{
                        routes: [],
                    }}
                    fixedHeader
                    header={{
                        title: false
                    }}
                    tabBarExtraContent={
                        <div>
                            <Button onClick={{}}>密码</Button>
                            <Button onClick={() => { backlogin() }}>退出登录</Button>
                        </div>
                    }
                    tabList={tabList}
                    tabProps={{
                        type: 'editable-card',
                        hideAdd: true,
                        onEdit: (e, action) => remove(e),
                        onTabClick: (e) => {
                            setActiveKey1(e)
                            history.push(e)
                        },
                        activeKey: activeKey1
                    }}>

                    <ProCard
                        direction="column"
                        ghost
                        gutter={[0, 16]}
                    >
                        {children}
                    </ProCard>
                </PageContainer>
            </ProLayout>
        </div>
    );
};